<?php

/**
 * 下单界面
 */
if (!defined('IN_CRONLITE')) die();
$USERDATA = login_data::user_data();
?>
<<!DOCTYPE html>
    <html lang="zh" style="font-size: 20px;<?= background::image() == false ? 'background:linear-gradient(to left, #70e1f5, #ffd194);' : background::image() ?>">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover,user-scalable=no">
        <script>
            document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 40 + "px";
        </script>
        <meta name="format-detection" content="telephone=no">
        <title><?= $conf['sitename'] . ($conf['title'] == '' ? '' : ' - ' . $conf['title']) ?></title>
        <meta name="keywords" content="<?= $conf['keywords'] ?>">
        <meta name="description" content="<?= $conf['description'] ?>">
        <link href="<?php echo $cdnpublic; ?>twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
        <link href="<?php echo $cdnpublic; ?>font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="<?php echo $cdnserver; ?>assets/template/cool/assets/css/foxui.css">
        <link rel="stylesheet" type="text/css" href="<?php echo $cdnserver; ?>assets/template/cool/assets/css/style.css">
        <link rel="stylesheet" type="text/css" href="<?php echo $cdnserver; ?>assets/template/cool/assets/css/foxui.diy.css">
        <link rel="stylesheet" type="text/css" href="<?php echo $cdnserver; ?>assets/template/cool/assets/css/iconfont.css">
        <link rel="stylesheet" type="text/css" href="<?php echo $cdnserver; ?>assets/template/cool/assets/css/style(1).css">
        <link rel="stylesheet" type="text/css" href="<?php echo $cdnserver; ?>assets/template/cool/assets/css/iconfont.css">
        <link rel="stylesheet" type="text/css" href="<?php echo $cdnserver; ?>assets/template/cool/assets/css/detail.css">
        <link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon" />
        <link href="<?php echo $cdnpublic; ?>limonte-sweetalert2/7.33.1/sweetalert2.min.css" rel="stylesheet">
        <link href="<?php echo $cdnpublic; ?>animate.css/3.7.2/animate.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="<?php echo $cdnserver; ?>assets/layui/css/layui.css" />
        <link href="<?php echo $cdnpublic; ?>Swiper/4.5.1/css/swiper.min.css" rel="stylesheet">
        <link href="<?php echo $cdnserver; ?>assets/layui/css/layui.css" rel="stylesheet" />
    </head>

    <style>
        .fix-iphonex-bottom {
            padding-bottom: 34px;
        }
    </style>

    <style>
        select {
            /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
            border: solid 1px #000;
            /*很关键：将默认的select选择框样式清除*/
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            /*将背景改为红色*/
            background: none;
            /*加padding防止文字覆盖*/
            padding-right: 14px;
        }

        /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
        select::-ms-expand {
            display: none;
        }

        .fui-page,
        .fui-page-group {
            -webkit-overflow-scrolling: auto;
        }

        .fui-cell-group .fui-cell .fui-input {
            display: inline-block;
            width: 70%;
            height: 32px;
            line-height: 1.5;
            margin: 0 auto;
            padding: 2px 7px;
            font-size: 12px;
            border: 1px solid #dcdee2;
            border-radius: 4px;
            color: #515a6e;
            background-color: #fff;
            background-image: none;
            cursor: text;
            transition: border .2s ease-in-out, background .2s ease-in-out, box-shadow .2s ease-in-out;
        }

        .btnee {
            width: 20%;
            float: right;
            margin-top: -2.8em;
        }

        .fui-cell-group .fui-cell .fui-cell-label1 {
            padding: 0 0.4rem;
            line-height: 0.7rem;
        }

        .fui-cell-group .fui-cell.must .fui-cell-label:after {
            top: 40%;
        }

        /*支付方式*/
        .payment-method {
            position: fixed;
            bottom: 0;
            background: white;
            width: 100%;
            padding: 0.75rem 0.7rem;
            z-index: 1000 !important;
        }

        .payment-method .title {
            font-size: 0.75rem;
            text-align: center;
            color: #333333;
            line-height: 0.75rem;
            margin-bottom: 1rem;
        }

        .payment-method .title span {
            height: 0.75rem;
            position: absolute;
            right: 0.3rem;
            width: 2rem;
        }

        .payment-method .title .close:before {
            font-family: 'iconfont';
            content: '\e654';
            display: inline-block;
            transform: scale(1.5);
            color: #ccc;

        }

        .payment-method .payment {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            padding: 0.7rem 0;
        }

        .payment-method .payment .icon-weixin1 {
            color: #5ee467;
            font-size: 1.3rem;
            margin-right: 0.4rem;
        }

        .payment-method .payment .icon-zhifubao1 {
            color: #0b9ff5;
            font-size: 1.5rem;
            margin-right: 0.4rem;
        }

        .icon-zhifubao1::before {
            margin-left: 1px;
        }

        .payment-method .payment .paychoose {
            font-size: 1.2rem;
        }

        .payment-method .payment .icon-xuanzhong4 {
            color: #2e8cf0;
        }

        .payment-method .payment .icon-option_off {
            color: #ddd;
        }

        .payment-method .payment .paytext {
            flex: 1;
            font-size: 0.8rem;
            color: #333;
        }

        .payment-method .layui-form-item button {
            margin-top: 0.8rem;
            background: #2e8cf0;
            color: white;
            letter-spacing: 1px;
            font-size: 0.7rem;
            border: none;
            outline: none;
            width: 17.25rem;
            height: 1.75rem;
            border-radius: 1.75rem;
        }

        .input_select {
            flex: 1;
            height: 1.5rem;
            border-radius: 2px;
            border: none;
            border-bottom: 1px solid #eee;
            outline: none;
            margin-left: 0.4rem;
        }

        img.logo {
            width: 22px;
            margin: -2px 5px 0 5px;
        }

        html {
            background-color: #E3E3E3;
            font-size: 14px;
            color: #000;
            font-family: '微软雅黑'
        }

        a,
        a:hover {
            text-decoration: none;
        }

        pre {
            font-family: '微软雅黑'
        }

        .box {
            padding: 20px;
            background-color: #fff;
            margin: 50px 100px;
            border-radius: 5px;
        }

        .box a {
            padding-right: 15px;
        }

        #about_hide {
            display: none
        }

        .layer_text {
            background-color: #fff;
            padding: 20px;
        }

        .layer_text p {
            margin-bottom: 10px;
            text-indent: 2em;
            line-height: 23px;
        }

        .button {
            display: inline-block;
            *display: inline;
            *zoom: 1;
            line-height: 30px;
            padding: 0 20px;
            background-color: #56B4DC;
            color: #fff;
            font-size: 14px;
            border-radius: 3px;
            cursor: pointer;
            font-weight: normal;
        }

        .photos-demo img {
            width: 200px;
        }

        .layui-layer-content {
            margin: auto;
        }

        * {
            -webkit-overflow-scrolling: touch;
        }

        .pro_content {
            background-image: linear-gradient(130deg, #00F5B2, #1FC3FF, #00dbde);
            height: 120px;
            position: relative;
            margin-bottom: 4rem;
            background-size: 300%;
            animation: bganimation 10s infinite;
        }

        @keyframes bganimation {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        #picture {
            padding-top: 1em;
        }

        #picture div {
            text-align: center;
        }

        #picture img {
            width: auto;
            max-height: 38vh;
            margin: auto;
        }

        .CouponCss {
            margin-bottom: 0.2em;
        }

        .CouponCss .layui-card {
            padding: 0;
            box-shadow: 3px 3px 12px #ddd;
            cursor: pointer;
            transition: all .6s;
            overflow: hidden;
            border-radius: 0.3em;
        }

        .CouponCss .layui-card:hover {
            box-shadow: 3px 3px 18px rgb(187, 184, 184);
        }

        .CouponCss img {
            width: 3em;
            height: 3em;
            display: block;
            margin: 0.5em auto;
        }

        .CouponCss ul {
            padding: 0;
            margin: 0;
        }

        .CouponCss ul li {
            font-size: 0.6em;
            color: rgba(0, 0, 0, 0.527);
        }

        .Coupons {
            position: fixed;
            bottom: 20%;
            right: 5%;
            width: 3rem;
            height: 3rem;
            z-index: 100;
            cursor: pointer;
            color: red;
            text-align: center;
            animation: Coupons 2s 0.2s linear infinite alternate;
        }

        .Coupons img {
            width: 3rem;
            height: 3rem;
        }

        @keyframes Coupons {
            0% {
                transform: scale(1);
            }

            25% {
                transform: scale(1.3);
            }

            50% {
                transform: scale(1);
            }

            75% {
                transform: scale(1.3);
            }
        }
        .btn{
            margin: 0.6rem 0 0.6rem 0 !important;
        }
    </style>

    <body ontouchstart="" style="overflow: auto;height: auto !important;max-width: 650px;margin: auto;">
        <div id="appshop" class="fui-page-group statusbar" style="max-width: 650px;left: auto;">

            <div class="Coupons" @click="Coupon" style="display: none;" :style="CouponData.length>=1?'display:block;':'display: none;'" title="领取惊喜优惠券！">
                <img src="/assets/img/coupon_5.png" />
                <br>
                <span style="font-size: 0.5em;">商品优惠券</span>
            </div>
            <div class="fui-page  fui-page-current " style="overflow: inherit">
                <div id="container" class="fui-content " style="background-color: rgb(255, 255, 255); padding-bottom: 60px;">
                    <div class="pro_content" style="margin-bottom: 3.5rem;">
                        <div class="list_item_box" style="top: 53px;">
                            <div class="bor_detail" style="display: none;" :style="GoodsData.name!=-1?'display:block;':'display: none;'">
                                <div class="thumb">
                                    <img :src="GoodsData.image">
                                </div>
                                <div class="pro_right fl">
                                    <span v-html="GoodsData.name"></span>
                                    <span id="level" class="list_item_title" style="color:#f00f00" v-html="GoodsData.level"></span>
                                    <div class="list_tag">
                                        <div class="price">
                                            <span class="t_price pay_prices"><span>{{ Price }}</span></span>
                                            <span class="stock" style="">剩余:<span class="quota">{{ GoodsData.count_quota }}</span>份</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <marquee style="margin:1em;">
                        <?php if ($USERDATA == false) { ?>
                            <a href="/user/" style="color: salmon">您当前未登录，点击此段文字进行登陆后再下单，售后更加快捷方便哦~</a>
                        <?php } ?>
                    </marquee>
                    <div class="content_friends">
                        <div class="top_tit">
                            商品说明
                        </div>
                        <div class="hd_intro" v-html="GoodsData.docs"></div>
                    </div>

                    <div class="swiper-container" id="swiper" style="width: 94%;max-height: 42vh;box-shadow: 1px 1px 8px #eee;border-radius: 0.3em">
                        <div class="swiper-wrapper" id="picture"></div>
                        <!-- Add Pagination -->
                        <div class="swiper-pagination"></div>
                    </div>

                    <div class="assemble-footer footer">
                        <a href="index.php" class="left" style="width: 25% !important;">
                            <div class="wid all">
                                <span class="icon icon-left top"></span>
                                <p>返回</p>
                            </div>
                        </a>
                        <a @click="ShareGoods" class="left" style="width: 25% !important;border-left: solid 1px #eee">
                            <div class="wid all">
                                <span class="icon icon-share top"></span>
                                <p>分享</p>
                            </div>
                        </a>
                        <a class="middle" href="javascript:$('#paymentmethod').show()" style="background-color: #f00000d7 !important">
                            <div class="wid y_buy " style="background-color: #f00000d7">
                                <span class="pay_price" style="line-height: 1.5rem !important;">购买此商品</span>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <div id="paymentmethod" class="common-mask" style="display:none;max-width: 650px">
                <div class="payment-method" style="position: absolute;max-height:70vh;">
                    <div class="title" style="color: salmon;font-size: 1.3em;">
                        下单信息确认
                        <span class="close" onclick="$('#paymentmethod').hide()"></span>
                    </div>
                    <hr>
                    <div style="height: 52vh;overflow:hidden;overflow-y: auto">
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 100%;text-align: left;padding:0">商品价格</label>
                            <div class="layui-input-">
                                <input type="text" disabled :value="Price" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 100%;text-align: left;padding:0">剩余份数</label>
                            <div class="layui-input-">
                                <input type="text" :value="GoodsData.count_quota + '份'" disabled lay-verify="required" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item" style="display: none;" :style="GoodsData.repetition==1?'display:block;':'display: none;'">
                            <label class="layui-form-label" style="width: 100%;text-align: left;padding:0">下单份数</label>
                            <div class="input-group">
                                <span class="input-group-btn">
                                    <button @click="PriceLs(1)" class="layui-btn layui-btn-sm" style="width: 2em;margin-top: -0.1em;border-radius: 0;">━</button>
                                </span>
                                <input v-on:input="PriceLs" class="layui-input" v-model.number="num" type="number" :min="GoodsPirce.min" :max="GoodsPirce.max" />
                                <span class="input-group-btn">
                                    <button @click="PriceLs(2)" class="layui-btn layui-btn-sm" style="width: 2em;margin-top: -0.1em;border-radius: 0;">✚</button>
                                </span>
                            </div>
                        </div>

                        <div v-for="(item, index) of GoodsData.input" :key="index">
                            <div class="layui-form-item" v-if="item.state == 1">
                                <label class="layui-form-label" style="width: 100%;text-align: left;padding:0">{{ item.Data }}</label>
                                <input type="text" v-model="form[index]" class="layui-input" :placeholder="'请将' + item.Data + '填写完整!'">
                            </div>

                            <div class="layui-form-item" v-if="item.state == 2">
                                <label class="layui-form-label" style="width: 100%;text-align: left;padding:0">{{ item.Data[0] }}</label>
                                <input type="text" v-model="form[index]" class="layui-input" :placeholder="item.Data[1].placeholder" />
                                <div class="layui-btn layui-btn-sm layui-btn-normal btnee" @click="extend(index, item.Data[1].way, item.Data[1].url)">{{ item.Data[1].name}}</div>
                            </div>

                            <div class="layui-form-item" v-if="item.state == 3">
                                <label class="layui-form-label" style="width: 100%;text-align: left;padding:0">{{ item.Data }}</label>
                                <input type="text" v-model="form[index]" class="layui-input" :placeholder="'请将' + item.Data + '填写完整!'">
                            </div>

                            <div class="layui-form-item" v-if="item.state == 4">
                                <label class="layui-form-label" style="width: 100%;text-align: left;padding:0">{{ item.Data[0] }}</label>
                                <div class="layui-input-">
                                    <select v-model="form[index]">
                                        <option v-for="o in item.Data[1]" :value="o">{{ o }}</option>
                                    </select>
                                </div>
                            </div>
                            <div v-if="item.state == 5">
                                <div v-if="item.data==-1" style="display: none;color: red;" :style="item.data==-1?'display:block;':'display: none;'">
                                    商品下单参数未配置完善，请联系客服处理！
                                </div>
                                <div v-if="item.data!=-1" class="layui-card-body" style="display: none;padding:0;" :style="item.data!=-1?'display:block;':'display: none;'">


                                    <fieldset v-for="(item,index) in GoodsData.input[0].data.MasterRule" class="layui-elem-field layui-field-title site-title">
                                        <legend>{{ item }}</legend>
                                        <div style="margin-top:0.5em">
                                            <button v-for="(items,indexs) in GoodsData.input[0].data.ChildRule[index]" type="button" class="layui-btn layui-btn-sm" :class="(SKU[index]==items?'layui-btn-normal':'layui-btn-primary')" @click="SqRuleSelect(index,indexs)" style="margin: 0.3em;border-radius: 0.5em;border: none;box-shadow:1px 1px 18px rgb(128, 190, 219);">
                                                {{ items }}
                                            </button>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>

                        </div>
                        <div class="form-group" style="text-align: center">
                            <button type="button" @click="submit" style="margin:auto;text-align: center;    line-height: 1.75rem;margin-top: 0.4rem;    background: #ff0404;    color: white;    letter-spacing: 1px;    font-size: 0.7rem;    border: none;    outline: none; height: 1.75rem;;" id="submit" class="btn btn-primary btn-block">
                                提交订单
                            </button>
                        </div>
                    </div>
                </div>
            </div>


            <script src="<?php echo $cdnpublic; ?>jquery/1.12.4/jquery.min.js"></script>
            <script src="<?php echo $cdnpublic; ?>jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
            <script src="<?php echo $cdnpublic; ?>twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <script src="<?php echo $cdnpublic; ?>jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
            <script src="<?php echo $cdnpublic; ?>layer/2.3/layer.js"></script>
            <script src="<?php echo $cdnserver; ?>assets/layui/layui.all.js"></script>
            <script src="<?php echo $cdnpublic; ?>jquery/3.4.1/jquery.min.js"></script>
            <script src="<?php echo $cdnpublic; ?>Swiper/4.5.1/js/swiper.min.js"></script>
            <script src="<?php echo $cdnpublic; ?>limonte-sweetalert2/7.33.1/sweetalert2.min.js"></script>
            <script src="<?php echo $cdnserver; ?>assets/js/vue3.js"></script>
            <script src="<?php echo $cdnserver; ?>assets/js/axios.min.js"></script>
            <script>
                var gid = <?= $_QET['gid'] ?>;
            </script>
            <script src="<?php echo $cdnserver; ?>assets/template/cool/assets/js/shop.js?vs=<?= $accredit['versions'] ?>"></script>
    </body>

    </html>